import React, { useEffect, useCallback } from 'react';
import { putLsCarWhiteInsertLsCarWhite, getLsCarWhiteEcho, postLsCarWhiteUpdateLsCarWhite } from '../../../../api'
import { Modal, Form, Input, TimePicker, message } from 'antd'
import moment from 'moment';

/**
 * @description: 添加、修改白名单页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-16） 修改添加类型
 */

const AddVehicleModule = ({
    addVehicleModuleShow,
    setAddVehicleModuleShow,
    listFun,
    clickId,
    setClickId
}) => {
    const [form] = Form.useForm()
    const { validateFields, resetFields, setFieldsValue } = form;
    const detailsFun = useCallback(
        () => {
            if (clickId) {
                ; (async () => {
                    const { code, msg, data } = await getLsCarWhiteEcho({ id: clickId })
                    if (code === '20000') {
                        data.enterTime = [
                            moment(data.effectiveStartIn, 'HH:mm:ss'),
                            moment(data.effectiveStartOut, 'HH:mm:ss')
                        ]
                        data.leaveTime = [
                            moment(data.effectiveEndIn, 'HH:mm:ss'),
                            moment(data.effectiveEndOut, 'HH:mm:ss')
                        ]
                        setFieldsValue(data)
                    } else {
                        message.error(msg)
                    }
                })()
            }
        },
        [clickId, setFieldsValue],
    )
    useEffect(() => {
        detailsFun();
    }, [detailsFun])

    const handleOk = () => {
        validateFields().then(values => {
            values.state = 1;
            values.effectiveStartIn = moment(values.enterTime[0]).format('HH:mm:ss')
            values.effectiveEndIn = moment(values.enterTime[1]).format('HH:mm:ss')
            values.effectiveStartOut = moment(values.leaveTime[0]).format('HH:mm:ss')
            values.effectiveEndOut = moment(values.leaveTime[1]).format('HH:mm:ss')
            delete values.enterTime;
            delete values.leaveTime;
            if (clickId) {
                values.id = clickId
                    ; (async () => {
                        const { code, msg } = await postLsCarWhiteUpdateLsCarWhite(values)
                        if (code === '20000') {
                            message.success('编辑成功！')
                            resetFields()
                            listFun()
                            setClickId(undefined)
                            setAddVehicleModuleShow(false)
                        } else {
                            message.error(msg)
                        }
                    })()
            } else {
                ; (async () => {
                    const { code, msg } = await putLsCarWhiteInsertLsCarWhite(values)
                    if (code === '20000') {
                        message.success('添加成功！')
                        resetFields()
                        listFun()
                        setClickId(undefined)
                        setAddVehicleModuleShow(false)
                    } else {
                        message.error(msg)
                    }
                })()
            }

        })
    };

    const handleCancel = () => {
        resetFields()
        setClickId(undefined)
        setAddVehicleModuleShow(false);
    };
    return <Modal
        title={clickId ? '编辑内部车辆' : '添加内部车辆'}
        visible={addVehicleModuleShow}
        onOk={handleOk}
        onCancel={handleCancel}
    >
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form={form}
        >
            <Form.Item
                label="车主姓名"
                name="carMaster"
                rules={[{ required: true, message: '请输入车主姓名!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="车牌号"
                name="carNo"
                rules={[
                    { required: true, message: '请输入车牌号!' },
                    {
                        pattern: /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/u
                        ,message: '请输入正确车牌号'
                    }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="车主电话"
                name="mobile"
                rules={[
                    { required: true, message: '请输入车主电话!' },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号！'
                    }
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="有效进入时间"
                name="enterTime"
                rules={[{ required: true, message: '请选择有效进入时间!' }]}
            >
                <TimePicker.RangePicker />
            </Form.Item>
            <Form.Item
                label="有效驶出时间"
                name="leaveTime"
                rules={[{ required: true, message: '请选择有效驶出时间!' }]}
            >
                <TimePicker.RangePicker />
            </Form.Item>
        </Form>
    </Modal>
}

export default AddVehicleModule